<script>

/**
 * Orders Component
 */
export default {
  data() {
    return {
      title: "Orders",
      items: [
        {
          text: "Ecommerce"
        },
        {
          text: "Orders",
          active: true
        }
      ],
      ordersData: [
        {
          type: "资讯信源",
          num: "420,865",
          normal: "420,525",
          abnormal: "340",
          total: "498,765,431",
          oneday: "1,497,366",
          sevenday: "5,989,464",
          relation: 122,
          updateTime: '32分钟前'
        },{
          type: "工商数据",
          num: "20",
          normal: "19",
          abnormal: "1",
          total: "45,031,276",
          oneday: "3,098,765",
          sevenday: "6,197,530",
          relation: 30,
          updateTime: '34分钟前'
        },{
          type: "招标数据",
          num: "143,297",
          normal: "143,255",
          abnormal: "42",
          total: "6,531,298",
          oneday: "127,650",
          sevenday: "255,300",
          relation: 34,
          updateTime: '35分钟前'
        },{
          type: "招聘数据",
          num: "30",
          normal: "28",
          abnormal: "2",
          total: "46,352,198",
          oneday: "476,342",
          sevenday: "952,684",
          relation: 55,
          updateTime: '36分钟前'
        },{
          type: "微信公众号",
          num: "483,678",
          normal: "483,654",
          abnormal: "24",
          total: "17,676,310",
          oneday: "449,872",
          sevenday: "899,744",
          relation: 130,
          updateTime: '37分钟前'
        },{
          type: "短视频",
          num: "509,832",
          normal: "509,512",
          abnormal: "320",
          total: "33,427,160",
          oneday: "3,209,871",
          sevenday: "6,419,742",
          relation: 32,
          updateTime: '38分钟前'
        },{
          type: "微博数据",
          num: "650,987",
          normal: "650,883",
          abnormal: "104",
          total: "66,309,873",
          oneday: "998,310",
          sevenday: "1,996,620",
          relation: 122,
          updateTime: '39分钟前'
        },{
          type: "证券数据",
          num: "13",
          normal: "13",
          abnormal: "0",
          total: "33,998,871",
          oneday: "398,721",
          sevenday: "797,442",
          relation: 31,
          updateTime: '40分钟前'
        },{
          type: "政府数据",
          num: "18,765",
          normal: "18,705",
          abnormal: "60",
          total: "21,312,368",
          oneday: "3,398,710",
          sevenday: "6,797,420",
          relation: 20,
          updateTime: '41分钟前'
        },{
          type: "标准数据",
          num: "34",
          normal: "32",
          abnormal: "2",
          total: "324,376",
          oneday: "3,201,987",
          sevenday: "6,403,974",
          relation: 12,
          updateTime: '42分钟前'
        }
      ],
      totalRows: 100,
      currentPage: 1,
      perPage: 10,
      pageOptions: [10, 25, 50, 100],
      filter: null,
      filterOn: [],
      sortBy: "",
      sortDesc: false,
      fields: [
        { key: "type", label: "信源类别" },
        { key: "num", sortable: true, label: "信源数量" },
        { key: "normal", sortable: true, label: "正常状态" },
        { key: "abnormal", sortable: true, label: "异常状态" },
        { key: "total", sortable: true, label: "采集总量" },
        { key: "oneday", sortable: true, label: "24小时增量" },
        { key: "sevenday", sortable: true, label: "7日数据增量" },
        { key: "relation", sortable: true, label: "关联客户" },
        { key: "updateTime", sortable: true, label: "最后更新时间" },
        { key: "action", label: "操作" }
      ],
      
    };
  },
  watch: {
    "currentPage": {
      handler(){
        console.log("触发更新");
      }
    }
  },
  methods: {
    /**
     * Search the table data with search input
     */
    onFiltered(filteredItems) {
      // Trigger pagination to update the number of buttons/pages due to filtering
      this.totalRows = filteredItems.length;
      this.currentPage = 1;
    },
    jumpSeed(v){
      this.$router.push({
        path: '/seed',
        query: {
          type: v.type
        }
      })
    },
    jump(v){
      console.log(v);
      if(v){
        this.$router.push({
          path: '/spider',
          query: {
            type: v
          }
        })
      }else{
        this.$router.push({
          path: '/spider'
        })
      }
    },
    jumpCustom(item){
      console.log(item);
      this.$router.push({
        path: '/custom',
        query: {
          type: item.type
        }
      })
    },
    jumpTime(t){
      this.$router.push({
        path: '/spider',
        query: {
          time: t
        }
      })
    },
  }
};
</script>

<template>
  <div class="card">
    <div class="card-body pt-0" style="padding-top: 1.25rem !important;">
      <div class="table-responsive">
        <b-table
          class="table-centered"
          :items="ordersData"
          :fields="fields"
          responsive="sm"
          :per-page="perPage"
          :current-page="1"
          :sort-by.sync="sortBy"
          :sort-desc.sync="sortDesc"
          :filter="filter"
          thead-class="thead-light"
          :filter-included-fields="filterOn"
          @filtered="onFiltered"
        >
          <template v-slot:cell(type)="row">
            <div @click="jumpSeed(row.item)" class="pointer">{{ row.value}}</div>
          </template>
          <template v-slot:cell(normal)="row">
            <div @click="jump('正常')" class="badge pointer font-size-12 badge-soft-success">{{ row.value}}</div>
          </template>
          <template v-slot:cell(abnormal)="row">
            <div @click="jump('异常')" class="badge pointer font-size-12 badge-soft-danger">{{ row.value}}</div>
          </template>
          <template v-slot:cell(total)="row">
            <div @click="jump('')" class="badge pointer font-size-12 badge-soft-warning">{{ row.value}}</div>
          </template>
          <template v-slot:cell(oneday)="row">
            <div @click="jumpTime('24小时')" class="pointer">{{ row.value}}</div>
          </template>
          <template v-slot:cell(sevenday)="row">
            <div @click="jumpTime('7日')" class="pointer">{{ row.value}}</div>
          </template>
          <template v-slot:cell(relation)="row">
            <div @click="jumpCustom(row.item)" class="pointer">{{ row.value}}</div>
          </template>
          <template v-slot:cell(action)>
            <a
              href="javascript:void(0);"
              class="mr-3 text-primary"
              v-b-tooltip.hover
              title="修改"
            >
              <i class="mdi mdi-pencil font-size-18"></i>
            </a>
            <a
              href="javascript:void(0);"
              class="text-danger"
              v-b-tooltip.hover
              title="删除"
            >
              <i class="mdi mdi-trash-can font-size-18"></i>
            </a>
          </template>
        </b-table>
      </div>
      <div class="row">
        <div class="col">
          <div class="dataTables_paginate paging_simple_numbers float-right">
            <ul class="pagination pagination-rounded mb-0">
              <!-- pagination -->
              <b-pagination v-model="currentPage" :total-rows="totalRows" :per-page="perPage"></b-pagination>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.table-centered{
  ::v-deep thead,::v-deep tbody{
    tr{
      th:last-child,td:last-child{
        text-align: right;
      }
    }
  }
}
</style>

